<template>
    <div>
        <div class="ncmm">
            <div class="ncmmtop">
                <div class="userContent">
                    <div class="userImg"><van-icon name="https://fastly.jsdelivr.net/npm/@vant/assets/icon-demo.png" /></div>
                    <div class="userTitle">{{ username }}</div>
                </div>
                <div class="userRight">
                    <van-icon name="good-job-o" v-show="flat == false" @click="addLikes(newObj)" /> <van-icon name="good-job" v-show="flat == true" @click="addLikes(newObj)" /> {{ num }}
                </div>
            </div>
            <div class="ncmmMain">
                <p>
                    {{ newObj.content }}
                </p>
                <div class="reply">
                    <span>{{ moment(newObj.create_time).format("YYYY-MM-DD hh:mm:ss") }}</span> <a @click="sonCom">回复TA</a>
                </div>
            </div>
        </div>
        <van-popup v-model:show="showSon" closeable position="bottom" :style="{ height: '40%' }" />
        <!-- 自定义图标 -->
        <van-popup v-model:show="showSon" closeable close-icon="close" position="bottom" :style="{ height: '40%' }" />
        <!-- 图标位置 -->
        <van-popup v-model:show="showSon" closeable close-icon-position="top-right" position="bottom" :style="{ height: '40%' }">
            <div class="ncmm son">
                <div class="ncmmtop">
                    <div class="userContent">
                        <div class="userImg"><van-icon name="https://fastly.jsdelivr.net/npm/@vant/assets/icon-demo.png" /></div>
                        <div class="userTitle">{{ username }}</div>
                    </div>
                    <!-- <van-icon name="share" /> -->
                    <div class="userRight"><van-icon name="good-job-o" v-show="!flat" @click="addLikes(newObj)" /><van-icon name="good-job" v-show="flat" @click="addLikes(newObj)" /> {{ num }}</div>
                </div>
                <div class="ncmmMain">
                    <p>
                        {{ newObj.content }}
                    </p>
                    <div class="reply">
                        <span>{{ moment(newObj.create_time).format("YYYY-MM-DD hh:mm:ss") }}</span>
                    </div>
                </div>
            </div>
            <SonCom v-for="item in sonList.list" :item="item" :key="item.id"></SonCom>
            <van-cell-group inset>
                <van-field v-model="sonTxt" placeholder="评论他">
                    <template #button>
                        <van-button size="small" @click="addSon" type="primary">评论</van-button>
                    </template>
                </van-field>
            </van-cell-group>
        </van-popup>
    </div>
</template>
<script setup>
import SonCom from "./SonCom.vue";
import { Popup, Field, CellGroup } from "vant";
import { useStore } from "vuex";
import { searchUserNickName, addLike, changeLike, addSonComment, selectSonComment, selectLike } from "@/request/index";
import { defineProps, toRef, ref, onMounted, computed, defineComponent } from "vue";
import moment from "moment";
import { reactive } from "vue";
let flat = ref(true);
let user_id = localStorage.getItem("token");
let commentItemObj = defineProps(["item"]);
let newObj = toRef(commentItemObj, "item");
let username = ref("");
let sonTxt = ref("");
let showSon = ref(false);
const store = useStore();
defineComponent({
    SonCom,
});
searchUserNickName({ user_id: newObj.value.user_id }).then((data) => {
    if (data.rows != undefined) {
        // console.log(data);
        username.value = data.rows[0].user_nick_name;
    } else {
        username.value = "用户已注销";
    }
});
let num = ref(0);
const addLikes = (x) => {
    console.log(x.id, 8484);
    if (localStorage.getItem("token")) {
        addLike({ user_id: user_id, user_db: "news_comment", comment_id: x.comment_id, detail_id: x.id })
            .then((data) => {
                if (data.flat == 1) {
                    flat.value = true;
                } else {
                    flat.value = false;
                }
                console.log(data, "dasdsad");
            })
            .then(() => {
                changeLike({ detail_id: x.id, user_db: "news_comment" }).then((data2) => {
                    num.value = data2.rows[0]["count(*)"];
                });
            });
    } else {
        alert("未登录,无法点赞");
    }
};
const init = (x) => {
    changeLike({ detail_id: x.id, user_db: "news_comment" })
        .then((data2) => {
            num.value = data2.rows[0]["count(*)"];
            console.log(data2, "dasdsad");
        })
        .then(() => {
            selectLike({ detail_id: x.id, user_db: "news_comment", user_id }).then((data) => {
                if (data.flat == 0) {
                    flat.value = false;
                } else {
                    flat.value = true;
                }
            });
        });
};
let token = localStorage.getItem("autoToken");
const addSon = () => {
    // (comment_id,content,create_time,user_id,parent_id)
    let newDate = moment(new Date()).format("YYYY-MM-DD hh:mm:ss");
    // console.log("新闻id", newObj.value.comment_id, "内容", sonTxt.value, "时间", newDate, "用户id", user_id, "父评论id", newObj.value.id);
    addSonComment(
        {
            comment_id: newObj.value.comment_id,
            content: sonTxt.value,
            create_time: newDate,
            user_id,
            parent_id: newObj.value.id,
            db_id: "news_comment",
        },
        { headers: { token } }
    ).then((data) => {
        // sonList.list = data.rows;
        selectSonComment({ parent_id: newObj.value.id }).then((data) => {
            sonList.list = data.rows;
            // console.log(sonList.list);
        });
        sonTxt.value = "";
    });
};
// const num=computed(()=>{
//     addLikes(newObj.value)
// })
onMounted(() => {
    init(newObj.value);
});
let sonList = reactive({ list: [] });
const sonCom = () => {
    // console.log(newObj.value.id);
    showSon.value = true;
    selectSonComment({ parent_id: newObj.value.id }).then((data) => {
        sonList.list = data.rows;
        // console.log(sonList.list);
    });
};
</script>
<style lang="scss">
.userImg,
.sonuserImg {
    overflow: hidden;
    font-size: 0.64rem;
}
.sonShow {
    height: 30px;
    width: 100%;
}
.son {
    padding-top: 40px;
}
.sonTit {
    display: block;
    margin-left: 10px;
    margin-top: 10px;
}
</style>
